<template>
    <div>
        <a-card>
            <a-form class="flex flex-wrap" ref="formRef" :model="formState" name="basic" :label-col="{ span: 8 }"
                :wrapper-col="{ span: 16 }" autocomplete="off">
                <a-form-item label="问题" name="content" class=" md:w-64 w-full !mb-1">
                    <a-input v-model:value="formState.content" />
                </a-form-item>
                <a-form-item label="用户" name="user_id" class=" md:w-64 w-full !mb-1">
                    <a-input v-model:value="formState.user_id" />
                </a-form-item>
                <a-form-item class=" md:w-56 w-full !mb-1">
                    <a-button @click="getData" class="  ml-3 bg-base text-white">搜索</a-button>
                    <a-button @click="reset" class=" ml-1">清空</a-button>
                </a-form-item>
            </a-form>
        </a-card>
        <vxe-table align="center" :data="data" class=" mt-2">
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column field="content" title="问题"></vxe-column>
            <vxe-column field="user" title="用户"></vxe-column>
            <vxe-column field="tokens" title="tokens"></vxe-column>
            <vxe-column field="valid" title="验证通过">
                <template #default="{ row }">
                    <a-tag color="green" v-show="row.valid">是</a-tag>
                    <a-tag color="red" v-show="!row.valid">否</a-tag>
                </template>
            </vxe-column>
            <vxe-column field="created_at" title="创建时间"></vxe-column>
            <vxe-column field="action" title="操作">
                <template #default="{ row }">
                    <a @click="router.push({ path: `/question/${row.id}` })">详情</a>
                </template>
            </vxe-column>
        </vxe-table>
        <vxe-pager align="left" @page-change="() => { getData() }" v-model:current-page="page.currentPage"
            v-model:page-size="page.pageSize" :total="page.totalResult">
        </vxe-pager>
    </div>
</template>

<script lang='ts' setup>
import list from '@/hooks/list';
import { questions } from '@/request/api';
import type { Question, Request } from '@/types/question';
const router = useRouter()
const formState = reactive<Request>({
    content: '',

})
const { data, page, getData, formRef, reset } = list<Question>(formState, questions, 'questions')
</script>